window.onload=function(){
    var obj={

    }
    function initEvent(){
        var titleList = document.getElementsByClassName('title');
        var contentList = document.getElementsByClassName('content');
        for(let i=0;i<titleList.length;i++){
            titleList[i].onclick=function(){//为第i个标题绑定点击事件
             //当第i个标题被点击后
             //只显示第i个
                contentList[i].classList.add('active');
                titleList[i].classList.add('active');
                //删除其他的active类别
                for(let j=0;j<contentList.length;j++){
                    if(j!=1){//不是当前的内容
                         contentList[j].classList.remove('active');
                         titleList[j].classList.remove('active');
                     }
                }
            }
        }
    }
   
   initEvent();
    //获取按钮对象，绑定添加点击事件，实现添加元素节点功能
    var btnAdd=document.getElementById('add');
    btnAdd.onclick=function(){
        //创建一个节点
       let li= document.createElement('li');
        //添加节点到ul中
        let text=document.createTextNode('标题四');
        li.appendChild(text);

        let clazz = document.createAttribute('class');
        clazz.value='title';
        li.setAttributeNode(clazz);
        let ul=document.getElementsByClassName('titles')[0];
        ul.appendChild(li);

        let cli= document.createElement('li');
        //添加节点到ul中
        let ctext=document.createTextNode('内容四');
        cli.appendChild(ctext);

        let cclazz = document.createAttribute('class');
        cclazz.value='content';
        cli.setAttributeNode(cclazz);
        let cul=document.getElementsByClassName('contents')[0];
        cul.appendChild(cli);
        initEvent();
    }
}
